<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/hero.css">
</head>

<body>
    <a href="javascript:" id="create">创建英雄列表</a>
    <ul class="list">


    </ul>
    <!-- <script src="js/hero.js"></script> -->
    <script type="text/javascript">
        // 后的的数据
        // datas = [{},{},{}]
        let datas = [{
            name: '司马懿',
            imgSrc: './uploads/heros/01.jpg'
        }, {
            name: '女娲',
            imgSrc: './uploads/heros/02.jpg'
        }, {
            name: '百里守约',
            imgSrc: './uploads/heros/03.jpg'
        }, {
            name: '亚瑟',
            imgSrc: './uploads/heros/04.jpg'
        }, {
            name: '虞姬',
            imgSrc: './uploads/heros/05.jpg'
        }, {
            name: '张良',
            imgSrc: './uploads/heros/06.jpg'
        }, {
            name: '安其拉',
            imgSrc: './uploads/heros/07.jpg'
        }, {
            name: '李白',
            imgSrc: './uploads/heros/08.jpg'
        }, {
            name: '阿珂',
            imgSrc: './uploads/heros/09.jpg'
        }, {
            name: '墨子',
            imgSrc: './uploads/heros/10.jpg'
        }, {
            name: '鲁班',
            imgSrc: './uploads/heros/11.jpg'
        }, {
            name: '嬴政',
            imgSrc: './uploads/heros/12.jpg'
        }, {
            name: '孙膑',
            imgSrc: './uploads/heros/13.jpg'
        }, {
            name: '周瑜',
            imgSrc: './uploads/heros/14.jpg'
        }, {
            name: 'XXX',
            imgSrc: './uploads/heros/15.jpg'
        }, {
            name: 'XXX',
            imgSrc: './uploads/heros/16.jpg'
        }, {
            name: 'XXX',
            imgSrc: './uploads/heros/17.jpg'
        }, {
            name: 'XXX',
            imgSrc: './uploads/heros/18.jpg'
        }, {
            name: 'XXX',
            imgSrc: './uploads/heros/19.jpg'
        }, {
            name: 'XXX',
            imgSrc: './uploads/heros/20.jpg'
        }];
        const ul = document.querySelector('ul');
        const a = document.querySelector('a');
        const create = function() {

            datas.forEach(function(item) {
                const li = document.createElement('li')
                li.innerHTML = `<img src="${item.imgSrc}" title="${item.name}" alt="">`
                ul.appendChild(li)
            })
            a.removeEventListener('click', create)
        }
        a.addEventListener('click', create)
    </script>
</body>

</html>